<!-- 渲染单据动态表单字段 -->
<template>
    <a-row class="order-dynamic-form-wrapper">
        <div v-for="(item,index) in FormData" :key="index">
            <a-col v-if="item.columnType == '文本' && item.onOff==true" :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="item.name" :prop="item.code" :rules="[{ required: item.onFill, message: `${item.name}不能为空`,trigger:'input'}]">
                    <a-input v-if="item.code =='sourceVoucherType'" :value="conversionOrderName(item.value)" :disabled="!item.onEdit" :style="item.onEdit?'':editFalse" />
                    <a-input v-else-if="item.code == 'voucherState'" :value="conversionVoucherState(item.value)" :disabled="true"></a-input>
                    <a-input v-else-if="item.code =='earnestMoney'" @blur="verifyAmount(item.value)" v-model.trim="item.value" :disabled="!item.onEdit" :style="item.onEdit?'':editFalse" />
                    <a-input v-else v-model.trim="item.value" :disabled="!item.onEdit" :style="item.onEdit?'':editFalse" />
                </a-form-model-item>
            </a-col>
            <a-col v-if="item.columnType == '下拉选择'" :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="item.name" :prop="item.code" :rules="[{ required: item.onFill, message: `${item.name}必须选择`,trigger:'input'}]">
                    <a-select :disabled="!item.onEdit" v-model="item.value" @change="downSelectChange">
                        <!-- :disabled="item.code == 'businessType' && select.key == 5" -->
                        <a-select-option v-for=" (select,index) in formatSelectJsonVal(item.dictCode,item.val)" :key="index +'select2'" :value="select.key">
                            {{select.label}}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
            </a-col>
            <a-col v-if="item.columnType == '下拉'" :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="item.name" :prop="item.code" :rules="[{ required: item.onFill, message: `${item.name}必须选择`,trigger:'input'}]">
                    <slot :name="item.slot" v-if="item.slot" :code="item.code"></slot>
                    <a-select v-else :disabled="!item.onEdit" v-model="item.value">
                        <a-select-option v-for=" (select,index) in formatRadioVal(item.val)" :key="index+'select'" :value="select">
                            {{select}}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
            </a-col>
            <a-col v-if="item.columnType == '搜索选择' && item.onOff==true" :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="item.name" :rules="[{ required: item.onFill, message: `${item.name}必须选择` }]">
                    <div v-if="(item.dataTab == '表头' || item.dataTab == '表尾') && item.onEdit">
                        <dynamicSearch v-if="item.code == 'partnerId' && refreshSearch && item.val != ''" ref="dunamicSearchRef" :dynamicData='item' @clickItem="searchBackData" :changeInvoiceType="changeInvoiceType"></dynamicSearch>
                        <dynamicSearch v-if="item.code == 'chooseSchemeId' && refreshSearch && item.val == 'OperationScheme'" ref="dunamicSearchRef" :dynamicData='item' @clickItem="searchBackData" :changeInvoiceType="changeInvoiceType"></dynamicSearch>
                        <dynamicSearch v-else-if="item.code != 'partnerId'" ref="dunamicSearchRef" :dynamicData='item' @clickItem="searchBackData" :changeInvoiceType="changeInvoiceType"></dynamicSearch>
                    </div>
                    <a-input v-else :disabled="!item.onEdit" :value="item.value"></a-input>
                </a-form-model-item>
            </a-col>
            <a-col v-if="item.columnType == '日期'" :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="item.name" :rules="[{ required: item.onFill, message: `${item.name}必须选择`,tigger:blur }]">
                    <a-date-picker v-model="item.value" :disabled="!item.onEdit" @change="((date,dateString)=>{onChangeTime(date,dateString,item.code+'_'+item.dataTab)})" />
                </a-form-model-item>
            </a-col>
            <a-col v-if="item.columnType == '时间'" :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="item.name" :prop="item.code" :rules="[{ required: item.onFill, message: `${item.name}必须选择`,tigger:blur }]">
                    <a-date-picker v-model="item.value" :disabled="!item.onEdit" @change="((date,dateString)=>{onChangeTime(date,dateString,item.code+'_'+item.dataTab)})" style="min-width:150px; width:auto;" format="YYYY-MM-DD HH:mm" show-time />
                </a-form-model-item>
            </a-col>
            <a-col v-if="item.columnType == '搜索下拉'" v-show="item.isShow" :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                <a-form-model-item :label="item.name">
                    <slot name="unitIdAll"></slot>
                </a-form-model-item>
            </a-col>
            <a-col v-if="item.columnType == '是否'" :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                <a-form-model-item :rules="[{ required: item.onFill, message: `${item.name}必须选择`,tigger:blur }]">
                    <!--销售发货 || 采购到货 (是否冲抵的处理)-->
                    <!-- <a-checkbox v-if="businessType == 2 && item.code=='isCounteract'" :disabled="true" v-model="item.value" :prop="item.code">{{item.name}}</a-checkbox> -->
                    <a-checkbox :disabled="!item.onEdit" v-model="item.value" :prop="item.code">{{item.name}}</a-checkbox>
                </a-form-model-item>
            </a-col>
            <a-col v-if="item.columnType == '小数' && item.onOff==true" :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="item.name" :prop="item.code" :rules="[{ required: item.onFill, message: `${item.name}不能为空`,trigger:'input'}]">
                    <a-input v-model.trim="item.value" oninput="value=value.toString().match(/^\d+(?:\.\d{0,5})?/)" :disabled="!item.onEdit" :style="item.onEdit?'':editFalse" />
                </a-form-model-item>
            </a-col>
            <a-col v-if="item.columnType == '整数' && item.onOff==true" :xs="grid.xs" :sm="grid.sm" :md="grid.md" :lg="grid.lg" :xl="grid.xl" :xxl="grid.xxl">
                <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="item.name" :prop="item.code" :rules="[{ required: item.onFill, message: `${item.name}不能为空`,trigger:'input'}]">
                    <a-input v-model.trim="item.value" oninput="value=value.toString().match(/^\d+/)" :disabled="!item.onEdit" :style="item.onEdit?'':editFalse" />
                </a-form-model-item>
            </a-col>
            <div v-if="item.columnType == '复选'" class="clearfix" style="padding: 0 0 0 68px;">
                <div style="padding-top:21px;margin-right:5px;width: 140px;">{{item.name}}:</div>
                <div>
                    <a-checkbox-group style="float:left; width: 90%;margin-left:140px;margin-top:-30px" :span="24" :disabled="!item.onEdit" :prop="item.code" v-model="item.value" :rules="[{ required: item.onFill, message: `${item.name}必须选择` }]">
                        <div :style="fromStyle" style="float:left;padding: 0 0 0 20px" v-for="(check,index) in formatRadioVal(item.val)" :key="index+'check'" :checked="check">
                            <a-checkbox :value="check">
                                {{check}}
                            </a-checkbox>
                        </div>
                    </a-checkbox-group>
                </div>

            </div>

            <!-- <div v-if="item.columnType == '复选'" class="clearfix" :span="24" style="padding: 0 0 0 68px;">
        <div style="padding-top:8px;margin-right:5px;">{{item.name}}:</div>
        <a-checkbox-group style="float:left;padding-left:60px;" :disabled="!item.onEdit" :prop="item.code" v-model="item.value" :rules="[{ required: item.onFill, message: `${item.name}必须选择` }]">
          <div :style="fromStyle" style="float:left;" v-for="(check,index) in formatRadioVal(item.val)" :key="index+'check'" :checked="check">
            <a-checkbox :value="check">
              {{check}}
            </a-checkbox>
          </div>
        </a-checkbox-group>
      </div> -->

        </div>

        <!-- <a-col v-if="item.columnType == '单选'" :span="8">
                    <a-form-model-item :label="item.name">
                        <a-radio-group :disabled="!item.onEdit" :prop="item.code" v-model="item.valueName" :rules="[{ required: item.onFill, message: `${item.name}必须选择` }]">
                            <a-row>
                                <a-col :style="fromStyle" :span="12" v-for="(radio,index) in formatRadioVal(item.val)" :key="index+'radio'">
                                    <a-radio :value="radio">
                                        {{radio}}
                                    </a-radio>
                                </a-col>
                            </a-row>
                        </a-radio-group>
                    </a-form-model-item>
                </a-col>
                <a-col v-if="item.columnType == '是否'" :span="6">
                    <a-form-model-item>
                        <a-checkbox :disabled="!item.onEdit" v-model="item.valueName" :prop="item.code">{{item.name}}</a-checkbox>
                    </a-form-model-item>
                </a-col>
                <a-col v-if="item.columnType == '区块'" :span="8">
                    <a-form-model-item :label="item.name">
                        <a-input :disabled="!item.onEdit" :span="24" style="resize:none" type="textarea" :prop="item.code" v-model="item.valueName" :rules="[{ required: item.onFill, message: `${item.name}不能为空` }]" />
                    </a-form-model-item>
                </a-col> -->
    </a-row>
</template>
<script>
import moment from "moment";
import dynamicSearch from "@/components/PopUpLayer/dynamicSearch"
import { conversionOrderName } from "@/utils/tool/parametric-switch"

export default {
    components: {
        dynamicSearch
    },
    props: {
        FormData: {
            type: Array,
            default: () => [],
        },
        businessType: {
            type: Number,
            default: 0
        },
        refreshSearch: {//用于财务 往来类型切换，往来单位更换组件 刷新
            type: Boolean,
            default: true,
        },
        checkboxHidden: {
            type: Number,
        }

    },
    data () {
        return {
            fromStyle: { paddingTop: "8px" },
            labelCol: { span: 10 },
            wrapperCol: { span: 14 },
            editFalse: {
                borderBottom: '1px solid #ded7d7'
            },
            grid: {
                xs: 24,
                sm: 12,
                md: 8,
                lg: 6,
                xl: 6,
                xxl: 4
            },
            style_op: 0,
            dateString: '',//选中的时间
            code: '',//时间组建的code
            changeInvoiceType: '',
            numReg: /^[0-9][0-9]*(\.[0-9]{1,8})?$/,//整数或者1-8位小数
        };
    },

    methods: {
        moment,
        conversionOrderName,
        formatVal (val) {
            //改变下拉数据结构
            let backJson = [];
            if (val && val != '' && val != null) {
                for (let i = 0; i < val.length; i++) {
                    backJson.push({
                        'id': val[i].id,
                        'name': val[i].name
                    })
                }
            }
            return backJson;
        },
        formatRadioVal (val) {
            return val && val != '' && val != null ? val.split(',') : '';
        },
        formatSelectJsonVal (code, val) {
            let thisVal = [];
            let backVal = [];
            if (code) {
                let dictData = JSON.parse(localStorage.getItem('dict'));
                dictData.forEach(item => {
                    if (item.dictCode == code) {
                        thisVal = item.dictDatas;
                    }
                });
                if (thisVal && thisVal != '' && thisVal != null) {
                    thisVal.forEach((item, index) => {
                        let obj = {
                            key: Number(item.dictLabel),
                            label: item.dictValue,
                        }
                        backVal.push(obj);
                    });
                }
            } else {
                thisVal = JSON.parse(val);
                if (thisVal && thisVal != '' && thisVal != null) {
                    thisVal.forEach((item, index) => {
                        backVal.push(item);
                    });
                }
            }

            return backVal;
        },
        onChangeTime (d, string, code) {
            //时间处理string
            // this.dateString = string;
            // this.code = code;
            let backData = {
                dateString: string,
                code: code
            }
            this.$emit('changetime', backData)
        },
        searchBackData (data) {
            //搜索选择组建返回的值
            this.$emit('clickItem', data);
        },
        downSelectChange (value) {
            console.log(value);
            //发票
            // if (this.$route.path == '/procurement/purchaseInvoice') {
            //     if (value == 99) {
            //         this.changeInvoiceType = 0
            //     }else{
            //         this.changeInvoiceType = 1
            //     }

            //     this.$refs.dunamicSearchRef[0].checkSearch();
            // } else {
            this.$emit('downSelectChange', value);
            // }
        },
        verifyAmount (val) {
            if (val) {
                if (!this.numReg.test(val)) {
                    this.$message.warning('订金金额输入有误！');
                    this.FormData.forEach(item => {
                        if (item.code == 'earnestMoney') {
                            item.value = '';
                        }
                    });
                }
            }

        },
        conversionVoucherState (text) {
            console.log(text)
            switch (text) {
                case -1:
                    text = '待提交';
                    break;
                case 0:
                    text = '待审核';
                    break;
                case 1:
                    text = '已审核';
                    break;
                case 2:
                    text = '已确认';
                    break;
                case 10:
                    text = '关闭';
                    break;
                default:
                    break;
            }
            return text;
        },
    },
    mounted() {
        console.error(this.FormData)
    },
};
</script>
<style lang="less">
    .order-dynamic-form-wrapper {
        .ant-select-selection,
        .ant-input {
            border: none;
            border-bottom: 1px solid #a0a0a0;
            border-radius: 0;
        }
        .ant-select-selection,
        .ant-input:focus {
            box-shadow: none;
        }

        .number-box {
            width: 170px;
            height: 32px !important;
            line-height: 32px;
        }
        .ant-form-item-control,
        .ant-form-item-control-wrapper {
            height: auto;
        }
        .ant-form-item-control::after,
        .ant-form-item-control-wrapper::after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: ' ';
            clear: both;
            height: 0;
        }
    }
</style>
<style lang="less" scoped>
    .ant-form-inline .ant-form-item {
        display: block !important;
    }
    .ant-calendar-picker {
        min-width: 100% !important;
    }
</style>